<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-hemisu.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-hemisu.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-hemisu.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="hemisu">










<meta name="description" content="Just do...">
<meta name="keywords" content="web, 前端, 生活, 分享">
<meta property="og:type" content="website">
<meta property="og:title" content="何米酥`s Blog">
<meta property="og:url" content="http://www.hemisu.com/index.html">
<meta property="og:site_name" content="何米酥`s Blog">
<meta property="og:description" content="Just do...">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="何米酥`s Blog">
<meta name="twitter:description" content="Just do...">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://www.hemisu.com/">





  <title>何米酥`s Blog</title>
  








  <!-- Hotjar Tracking Code for www.hemisu.com -->
  <script>
      (function(h,o,t,j,a,r){
          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
          h._hjSettings={hjid:1933736,hjsv:6};
          a=o.getElementsByTagName('head')[0];
          r=o.createElement('script');r.async=1;
          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
          a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  </script>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">何米酥`s Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">EFE</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2020/06/20/promise-pool/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2020/06/20/promise-pool/" itemprop="url">js异步初探 - 图解并发控制</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-06-20T01:57:31+00:00">
                2020-06-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>本篇起因源一个问题，Promise.all的限制并发数是多少？</p>
<p>这个可以通过 <code>V8</code> 的<a href="https://github.com/v8/v8/blob/4b9b23521e6fd42373ebbcb20ebe03bf445494f9/test/mjsunit/es6/promise-all-overflow-1.js#L9-L12" target="_blank" rel="noopener">测试用例</a>得知这个数字不超过 <code>2097151</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">2</span> ** <span class="number">21</span> - <span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> p = <span class="built_in">Promise</span>.resolve(<span class="number">1</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; a.length; ++i) a[i] = p;</span><br><span class="line">testAsync(<span class="function"><span class="params">assert</span> =&gt;</span> &#123;</span><br><span class="line">  assert.plan(<span class="number">1</span>);</span><br><span class="line">  <span class="built_in">Promise</span>.all(a).then(assert.unreachable, reason =&gt; &#123;</span><br><span class="line">    assert.equals(<span class="literal">true</span>, reason <span class="keyword">instanceof</span> <span class="built_in">RangeError</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>平时在社区中，我们也偶尔会看到这样一道题：</p>
<blockquote>
<p>请实现如下函数，可以批量请求数据,所有的 url 地址在 urls 参数中，同时可以通过 max 参数控制请求的并发数，当所有请求结束之后，需要执行 callback 回调函数，发送请求的函数可以直接使用 fetch 即可</p>
</blockquote>
<p>这道题我们发现，发送请求的函数使用 <code>fetch</code> 可知这是在在浏览器环境中；浏览器其实对同一域名的并发数量有所限制，比如 <code>Chrome</code> 就限制了 <code>6</code> 个，所以这里的 <code>max</code> 我们可以认为是不超过 <code>10</code> 个。解决这类限制我们可以通过多域名的形式优化。<br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2020/06/20/promise-pool/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </p></div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2019/11/04/javascript-concurrency-promise/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2019/11/04/javascript-concurrency-promise/" itemprop="url">js异步初探 - promise</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-11-04T20:36:11+00:00">
                2019-11-04
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/学习/" itemprop="url" rel="index">
                    <span itemprop="name">学习</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>js的异步编程是我们无法避免的话题之一：我们会在平时的编码过程中用到它，也会在面试中遇到它（大雾）</p>
<p>今天就对js的异步发展进行简单的探索，并且顺着流程了解并实现一个符合规范的promise来帮助更好地理解js中异步编程的处理逻辑：</p>
<p>本文第一章节将花费6～8min阅读时间；<br>第二章如果不着手实现将花费10～15min理解时间；参与实现将花费1h :D<br>第三章将花费4～6min阅读时间；</p>
<p>行文仓促，如有错误还请指正。</p>
<ul>
<li><a href="#1-%e5%89%8d%e8%a8%80">1. 前言</a><ul>
<li><a href="#11-%e4%b8%ba%e4%bd%95%e4%bc%9a%e6%9c%89%e5%bc%82%e6%ad%a5">1.1 为何会有异步</a></li>
<li><a href="#12-%e5%bc%82%e6%ad%a5%e7%9a%84%e5%ae%9e%e7%8e%b0%e5%8e%9f%e7%90%86">1.2 异步的实现原理</a><ul>
<li><a href="#121-%e5%b8%b8%e8%a7%81%e7%9a%84%e5%bc%82%e6%ad%a5%e6%93%8d%e4%bd%9c">1.2.1 常见的异步操作：</a></li>
<li><a href="#122-%e4%ba%8b%e4%bb%b6%e7%bb%91%e5%ae%9a%e7%ae%97%e4%b8%8d%e7%ae%97%e5%bc%82%e6%ad%a5%e6%93%8d%e4%bd%9c">1.2.2 事件绑定算不算异步操作？</a></li>
</ul>
</li>
<li><a href="#13-%e5%bc%82%e6%ad%a5%e7%9a%84%e6%bc%94%e8%bf%9b%e6%96%b9%e6%a1%88">1.3 异步的演进方案</a><ul>
<li><a href="#131-deferred%e5%92%8cpromise%e6%9c%89%e4%bb%80%e4%b9%88%e5%8c%ba%e5%88%ab">1.3.1 <code>$.deferred</code>和<code>$.promise</code>有什么区别？</a></li>
<li><a href="#132-callback%e7%9a%84%e5%bc%95%e5%85%a5">1.3.2 callback的引入</a></li>
<li><a href="#133-promise%e4%b9%9f%e6%98%afcallback">1.3.3 promise也是callback？</a></li>
<li><a href="#134-generator%e4%b9%9f%e6%98%afcallback">1.3.4 generator也是callback？</a></li>
<li><a href="#135-%e6%9c%80%e5%90%8e%e6%bc%94%e8%bf%9b%e5%88%b0asyncawait">1.3.5 最后演进到async/await</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#2-promise">2 Promise</a><ul>
<li><a href="#21-%e6%a6%82%e8%a7%88">2.1 概览</a><ul>
<li><a href="#211-%e5%9b%be21%e4%b8%ad%e4%bf%a9%e8%80%85%e7%9a%84promise%e6%9c%89%e5%95%a5%e5%8c%ba%e5%88%ab">2.1.1 图2.1中俩者的promise有啥区别？</a></li>
</ul>
</li>
<li><a href="#22-%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%b8%aa-promisea-%e8%a7%84%e8%8c%83">2.2 实现一个 Promise/A+ 规范</a><ul>
<li><a href="#221-%e5%89%8d%e6%9c%9f%e5%b7%a5%e4%bd%9c">2.2.1 前期工作</a></li>
<li><a href="#222-%e5%bc%80%e5%a7%8b%e5%ae%9e%e7%8e%b0">2.2.2 开始实现</a></li>
<li><a href="#223-%e6%9c%af%e8%af%ad---1terminology">2.2.3 术语 - 1.terminology</a></li>
<li><a href="#224-promise%e7%9a%84%e7%8a%b6%e6%80%81---21-promise-states">2.2.4 promise的状态 - 2.1 Promise States</a></li>
<li><a href="#225-then-%e6%96%b9%e6%b3%95---22-the-then-method">2.2.5 then 方法 - 2.2 The then Method</a></li>
<li><a href="#226-then-%e6%96%b9%e6%b3%95---23-the-promise-resolution-procedure">2.2.6 then 方法 - 2.3 The Promise Resolution Procedure</a></li>
</ul>
</li>
<li><a href="#23-%e5%a2%9e%e5%bc%ba%e4%b8%baes6%e7%9a%84promise">2.3 增强为ES6的promise</a><ul>
<li><a href="#231-promiseprototypecatch">2.3.1 Promise.prototype.catch</a></li>
<li><a href="#232-promiseall">2.3.2 Promise#all</a></li>
<li><a href="#232-promiserace">2.3.2 Promise#race</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#3-%e6%80%bb%e7%bb%93">3 总结</a><ul>
<li><a href="#31%e5%ae%9e%e7%8e%b0promise%e4%b9%8b%e5%90%8e%e7%9a%84%e6%80%9d%e8%80%83">3.1实现promise之后的思考</a><ul>
<li><a href="#311-%e5%ae%83%e6%98%af%e4%b8%80%e4%b8%aacallback-management">3.1.1 它是一个callback management</a></li>
<li><a href="#312-%e8%83%bd%e6%89%8b%e5%86%99promies%e5%ae%9e%e7%8e%b0%e5%b0%b1%e4%b8%80%e5%ae%9a%e7%b2%be%e9%80%9apromies">3.1.2 能手写promies实现，就一定精通promies？</a></li>
<li><a href="#313-promise-%e6%98%af%e6%af%94-callback-%e6%9b%b4%e5%85%88%e8%bf%9b%e7%9a%84%e5%bc%82%e6%ad%a5%e6%96%b9%e6%a1%88">3.1.3 Promise 是比 callback 更先进的异步方案？</a></li>
</ul>
</li>
<li><a href="#32-%e5%8f%8d%e6%a8%a1%e5%bc%8f">3.2 反模式</a><ul>
<li><a href="#321-anti-patterns-1">3.2.1 Anti-patterns 1</a></li>
<li><a href="#322-anti-patterns-2">3.2.2 Anti-patterns 2</a></li>
<li><a href="#323-anti-patterns-3">3.2.3 Anti-patterns 3</a></li>
</ul>
</li>
<li><a href="#33-%e9%99%84%e5%bd%95">3.3 附录</a></li>
<li><a href="#%e7%ad%94%e6%a1%881-%e4%ba%8b%e4%bb%b6%e7%bb%91%e5%ae%9a%e7%ae%97%e4%b8%8d%e7%ae%97%e5%bc%82%e6%ad%a5%e6%93%8d%e4%bd%9c">答案1 事件绑定算不算异步操作</a></li>
</ul>
</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2019/11/04/javascript-concurrency-promise/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/10/17/2018-10-17-React-Components-Elements-and-Instance/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/10/17/2018-10-17-React-Components-Elements-and-Instance/" itemprop="url">一次打包错误 引起的对 React Components, Elements, Instance三者的认识</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-10-17T10:37:36+00:00">
                2018-10-17
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>在一次项目重构中，我将filter组件需要的<code>Input</code>、<code>Select</code>之类通过<code>Connect</code>包裹后，通过<code>&lt;MyFromItem /&gt;</code>这种形式当作参数传入。</p>
<p>大致的数据结构如下，component可以传入自定义组件或者直接传入<code>&lt;Input /&gt;</code>这种形式；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line">  &#123;</span><br><span class="line">    name: <span class="string">'name'</span>,</span><br><span class="line">    label: <span class="string">'姓名'</span>,</span><br><span class="line">    component: <span class="xml"><span class="tag">&lt;<span class="name">StaffFormItem</span> /&gt;</span></span>,</span><br><span class="line">  &#125;</span><br><span class="line">  ...</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>在本地跑的时候，并没有发现问题；然后打包之后就发现跑不通，报错<code>n is not a function</code>之类的错误；</p>
<p>打开sourcemap之后定位到这个n是rc-form中的getFieldDecorator函数，遂寻找这个值未传入的原因。</p>
<p>调试了多次（打包实在是太慢了……），终于发现是判断类型的时候发生了问题：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这里传入了&lt;StaffFormItem /&gt;</span></span><br><span class="line"><span class="keyword">const</span> type = component.type.name;</span><br><span class="line">swith(type) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="string">'Connect'</span>: <span class="comment">// 判断受控组件</span></span><br><span class="line">    <span class="keyword">return</span> <span class="comment">//...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>打包之后，这里的type会从<code>Connect</code>变为<code>n</code>, <code>j</code>这种混淆后的形式，万万没想到。</p>
<p>解决问题之后去搜索了一下，出来了3个概念:</p>
<ul>
<li><p>Components</p>
</li>
<li><p>Component Instances</p>
</li>
<li><p>Elements</p>
</li>
</ul>
<p>在其他UI框架中的，一般只有模板（<code>Class</code>）和实例（<code>new Class()</code>）这样的概念；而在React中，<code>Component Instances</code>和<code>Elements</code>不是同一种类型的东西，它们之间没有一对一的关系；</p>
<p>看下面一段代码:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'这时候是Component Instance'</span>, <span class="keyword">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">const</span> another_element = <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Hello World!<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'这里是一个element'</span>, another_element);</span><br><span class="line">    <span class="keyword">return</span> another_element;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'这是一个Component'</span>, MyComponent);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> element = <span class="xml"><span class="tag">&lt;<span class="name">MyComponent</span> /&gt;</span></span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'这是一个element'</span>, element);</span><br></pre></td></tr></table></figure>
<p>上述这段代码，可以得出：</p>
<ul>
<li><p><code>MyComponent</code>(这个class自身)是一个Component</p>
</li>
<li><p><code>element</code>是一个对象，但是它不是MyComponent的一个实例。它仅仅描述了一个对象实例(<code>Component Instance</code>)被创建了，它是一个拥有<code>key</code>、<code>props</code>、<code>ref</code>、<code>type</code>这些属性的一个对象。在这里，<code>key</code>和<code>ref</code>的值为<code>null</code>,<code>props</code>是一个空对象，<code>type</code>即为<code>MyComponent</code>字符串。</p>
</li>
<li><p>一个<code>MyComponent</code>的实例将会在<code>element</code>被render之后被创建(在上述代码中，实例在构造函数中打印)</p>
</li>
<li><p><code>anthor_element</code>也是一个对象，它的<code>key</code>、<code>props</code>、<code>ref</code>和上面所述的一样，但是它的<code>type</code>为<code>div</code></p>
</li>
</ul>
<p>具体可以看<a href="https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html" target="_blank" rel="noopener">React Components, Elements, and Instances</a></p>
<p>总结一下，可以看出React官方对这几个概念的定义非常清楚：</p>
<ul>
<li><p><code>An element is a plain object describing a component instance or DOM node and its desired properties.</code></p>
</li>
<li><p><code>A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element</code></p>
</li>
</ul>
<p><code>Component</code>可以被用来创建一个<code>Instance</code>，当<code>Instance</code>被render之后就创建了一个<code>Element</code>。</p>
<p>创建实例的过程不需要我们手动进行；<br>多个Element可以描述同一个实例（比如<code>&lt;Parent /&gt;</code>组件的<code>render()</code>返回了<code>&lt;Child /&gt;</code>，每次触发<code>render</code>时都会返回一个新的<code>element</code>，但是已经存在<code>Child</code>实例可能被复用）；<br>一个Elmenet也可以用于描述多个实例（比如把一个<code>element</code>存储到一个变量中<code>const a = &lt;Child /&gt;</code>,然后调用多次<code>&lt;div&gt;{a} {a} {a}&lt;/div&gt;</code>）</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/09/04/2018-09-04-bubble-demo/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/09/04/2018-09-04-bubble-demo/" itemprop="url">排序展示效果</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-09-04T22:48:19+00:00">
                2018-09-04
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>目的呢是做一个类似如图的样子 有意思就记录一下<br><img src="http://www.hemisu.com/demo/bubbleDemo.gif" alt></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 生成一个长度为10的数组</span></span><br><span class="line"><span class="keyword">const</span> testArr = <span class="built_in">Array</span>.from(&#123;<span class="attr">length</span>: <span class="number">10</span>&#125;).map(<span class="function"><span class="params">()</span>=&gt;</span> <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random() * <span class="number">10</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 一个冒泡排序？（大雾） 会返回每次的排序的移动方式 和 排序完之后的数组</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bubble</span>(<span class="params">testArr</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> arr = testArr.slice();</span><br><span class="line">  <span class="keyword">const</span> operationList = [];</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; testArr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> j = i + <span class="number">1</span>; j &lt; testArr.length; j++) &#123;</span><br><span class="line">      <span class="keyword">if</span>(arr[i] &gt; arr[j])&#123;</span><br><span class="line">        [arr[i], arr[j]] = [arr[j], arr[i]]</span><br><span class="line">        <span class="comment">// 记录了每次移动的方式</span></span><br><span class="line">        operationList.push(&#123;</span><br><span class="line">          <span class="keyword">from</span>: i,</span><br><span class="line">          to: j,</span><br><span class="line">          array: arr.slice(),</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> operationList;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> container = <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>);</span><br><span class="line"><span class="comment">// 放入fragment统一插入 减少dom操作</span></span><br><span class="line"><span class="keyword">var</span> collect = <span class="built_in">document</span>.createDocumentFragment(<span class="string">'div'</span>);</span><br><span class="line"><span class="keyword">var</span> spanList = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; testArr.length; i++) &#123;</span><br><span class="line">  <span class="keyword">var</span> span = <span class="built_in">document</span>.createElement(<span class="string">'span'</span>);</span><br><span class="line">  span.className = <span class="string">'square'</span>;</span><br><span class="line">  span.innerText = testArr[i];</span><br><span class="line">  span.style.left = i * <span class="number">40</span> + <span class="string">'px'</span>;</span><br><span class="line">  spanList[i] = span; <span class="comment">// 保存对各个span的引用</span></span><br><span class="line">  collect.appendChild(span);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">container.appendChild(collect);</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> j = <span class="number">0</span>; j &lt; result.length; j++) &#123; <span class="comment">// 定时任务</span></span><br><span class="line">  setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> fromIndex = result[j].from;</span><br><span class="line">    <span class="keyword">const</span> toIndex = result[j].to;</span><br><span class="line">    <span class="keyword">const</span> tmp = spanList[toIndex].style.left;</span><br><span class="line"></span><br><span class="line">    spanList[toIndex].style.left = spanList[fromIndex].style.left;</span><br><span class="line">    spanList[fromIndex].style.left = tmp;</span><br><span class="line">    [spanList[toIndex], spanList[fromIndex]] = [spanList[fromIndex], spanList[toIndex]]</span><br><span class="line">  &#125;, <span class="number">1000</span> * j)<span class="comment">//0.5秒动画 1秒延迟</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>配合上css的transition属性，就可以做到简单的动画效果啦</p>
<p>演示地址：<a href="http://www.hemisu.com/demo/sortDemo.html">点击查看</a><br>// 打开控制台 数据显示更清晰</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/07/23/2018-07-23-unique-arr/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/07/23/2018-07-23-unique-arr/" itemprop="url">复杂数组去重</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-07-23T23:27:28+00:00">
                2018-07-23
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>数组去重 内部可能会有数组，对象</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2018/07/23/2018-07-23-unique-arr/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/06/11/2018-06-11-scriptoj/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/06/11/2018-06-11-scriptoj/" itemprop="url">scriptOJ 题集</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-11T15:56:33+00:00">
                2018-06-11
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>给前端做的在线oj题集</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2018/06/11/2018-06-11-scriptoj/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/05/11/2018-5-11-two-practice/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/11/2018-5-11-two-practice/" itemprop="url">js练习两则</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-11T10:24:10+00:00">
                2018-05-11
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <a id="more"></a>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">  请使用JavaScript实现一个getIntersection函数，可获取多个区间的交集，规则如下：</span></span><br><span class="line"><span class="comment">  区间用长度为2的数字数组表示，如[2, 5]表示区间2到5（包括2和5）；区间不限定方向，如[5, 2]等同于[2, 5];</span></span><br><span class="line"><span class="comment">  该方法可接受多个区间，并返回所有区间的交集（用区间表示），如空集用null表示。并能正确通过以下测试用例</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">getIntersection</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// your code here</span></span><br><span class="line">  <span class="keyword">const</span> minArr = [];</span><br><span class="line">  <span class="keyword">const</span> maxArr = [];</span><br><span class="line">  <span class="comment">// 验证输入</span></span><br><span class="line">  <span class="keyword">const</span> length = args.length;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> args[i][<span class="number">0</span>] !== <span class="string">'number'</span> || <span class="keyword">typeof</span> args[i][<span class="number">1</span>] !== <span class="string">'number'</span>) <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 取左边和右边</span></span><br><span class="line">  args.forEach(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">    minArr.push(<span class="built_in">Math</span>.min(...v));</span><br><span class="line">    maxArr.push(<span class="built_in">Math</span>.max(...v));</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">const</span> left = <span class="built_in">Math</span>.max(...minArr);</span><br><span class="line">  <span class="keyword">const</span> right = <span class="built_in">Math</span>.min(...maxArr);</span><br><span class="line">  <span class="keyword">if</span>(left &lt;= right) <span class="keyword">return</span> [left, right];</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">getIntersection([<span class="number">1</span>, <span class="number">4</span>], [<span class="number">3</span>, <span class="number">5</span>]); <span class="comment">// [3, 4]</span></span><br><span class="line">getIntersection([<span class="number">5</span>, <span class="number">2</span>], [<span class="number">4</span>, <span class="number">9</span>], [<span class="number">3</span>, <span class="number">6</span>]); <span class="comment">// [4, 5]</span></span><br><span class="line">getIntersection([<span class="number">1</span>, <span class="number">7</span>], [<span class="number">8</span>, <span class="number">9</span>]); <span class="comment">// null</span></span><br><span class="line">getIntersection([<span class="string">'x'</span>, <span class="number">7</span>], [<span class="number">4</span>, <span class="number">9</span>]); <span class="comment">// null</span></span><br><span class="line">getIntersection([<span class="number">1</span>, <span class="number">2</span>]); <span class="comment">// [1, 2]</span></span><br><span class="line">getIntersection([<span class="number">1</span>, <span class="number">2</span>], [<span class="number">2</span>, <span class="number">3</span>]); <span class="comment">// [2, 2]</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  请使用 JavaScript 编写一个树的深度优先遍历函数（节点最深的最先访问到，依次类推），满足以下测试用例：</span></span><br><span class="line"><span class="comment">  假设树的结构如下</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> tree = [</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="number">1</span>,</span><br><span class="line">    name: <span class="string">'张三'</span>,</span><br><span class="line">    children: [</span><br><span class="line">    	&#123;</span><br><span class="line">    		id: <span class="number">2</span>,</span><br><span class="line">    		name: <span class="string">'李四'</span>,</span><br><span class="line">    		children: [</span><br><span class="line">    			&#123;</span><br><span class="line">    				id: <span class="number">5</span>,</span><br><span class="line">    				name: <span class="string">'张五'</span></span><br><span class="line">    			&#125;</span><br><span class="line">    		]</span><br><span class="line">    	&#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    id: <span class="number">6</span>,</span><br><span class="line">    name: <span class="string">'玛丽'</span></span><br><span class="line">  &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 测试用例：</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 生成一颗新树，将所有节点的id，加1</span></span><br><span class="line"><span class="built_in">console</span>.log(treeMap(tree, node =&gt; &#123;</span><br><span class="line">	<span class="keyword">let</span> newNode = &#123; ...node &#125;</span><br><span class="line">	newNode.id = node.id + <span class="number">1</span></span><br><span class="line">	<span class="keyword">return</span> newNode</span><br><span class="line">&#125;))</span><br><span class="line"><span class="comment">// 打印的新树，应该与tree的结构一致，只是每个id自增1，老的tree，应该没有任何改动</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 打印每个节点的id</span></span><br><span class="line">treeMap(tree, node =&gt; &#123;</span><br><span class="line">	<span class="built_in">console</span>.log(node.id)</span><br><span class="line">	<span class="keyword">return</span> node</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 应打印顺序应该是： 5，2，1，6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 对于非法输入，应直接返回第一个入参</span></span><br><span class="line"><span class="built_in">console</span>.log(treeMap(<span class="literal">null</span>)) <span class="comment">// 输出null</span></span><br><span class="line"><span class="built_in">console</span>.log(treeMap(tree, <span class="literal">true</span><span class="comment">/*不是函数*/</span>)) <span class="comment">//输出tree</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 解答：</span></span><br><span class="line"><span class="keyword">const</span> deepClone = <span class="function"><span class="params">tree</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">let</span> newTree = [];</span><br><span class="line">  tree.forEach(<span class="function"><span class="params">node</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> newnode = &#123;&#125;</span><br><span class="line">    newnode.id = node.id;</span><br><span class="line">    newnode.name = node.name;</span><br><span class="line">    <span class="keyword">if</span>(node.children) &#123;</span><br><span class="line">      newnode.children = deepClone(node.children);</span><br><span class="line">    &#125;</span><br><span class="line">    newTree.push(newnode);</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> newTree;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> treeMap = <span class="function">(<span class="params">root, fn</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 验证是否为数组</span></span><br><span class="line">  <span class="keyword">if</span>(!<span class="built_in">Array</span>.isArray(root)) &#123;</span><br><span class="line">    <span class="keyword">return</span> root;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 验证是否是函数</span></span><br><span class="line">  <span class="keyword">if</span>(&#123;&#125;.toString.call(fn) !== <span class="string">'[object Function]'</span>) &#123;</span><br><span class="line">    <span class="comment">// 不是函数</span></span><br><span class="line">    fn = <span class="function"><span class="params">f</span> =&gt;</span> f;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> deepCloneTree = deepClone(root);</span><br><span class="line">  deepCloneTree.forEach(<span class="function">(<span class="params">child, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span>(child.children) &#123;</span><br><span class="line">      dfs(child, fn);</span><br><span class="line">    &#125;</span><br><span class="line">    array[index] = fn(child);</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> deepCloneTree;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> dfs = <span class="function">(<span class="params">root, fn</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span>(root.children)&#123;</span><br><span class="line">    root.children.forEach(<span class="function">(<span class="params">child, index, array</span>) =&gt;</span> &#123;</span><br><span class="line">      dfs(child, fn);</span><br><span class="line">      array[index] = fn(child);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/05/02/2018-5-2-React-redux/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/02/2018-5-2-React-redux/" itemprop="url">《深入浅出React和Redux》读书笔记</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-02T10:54:21+00:00">
                2018-05-02
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这本由程墨编写的《深入浅出React和Redux》是从我入门React之初，在翻阅官方文档之后开始看的，第一次看时一头雾水，仅为了了解React怎么用；</p>
<p>再翻一次开始看得懂性能优化和Redux这类状态应用管理的使用。</p>
<p>随着对React不断的深入，课余的拓展阅读，发现即使是17年年初出版，在React版本更新迅速、API不断变动的情况下，这本书依旧可以带来不一样的阅读体验。</p>
<p>本书的总共12章节，1-2章讲了React的核心理念，3-4章重点讲解状态管理的演化过程，第5章讲解性能优化，提出了虚拟DOM和调和过程，第6章提出了高阶组件(HOC)，注重于抽象和组合，第7，9章立足于第3章引入的Redux，对副作用的处理引入了解决方案，第8章讲解了单元测试，第10章及之后，除去第11章对于路由的使用，其余的动画、服务器同构等因为暂未实践理解不到位就不予讨论了。</p>
<p>如果要对React一步一步分析下来，它可以讲解的知识点怕是可以出好几本动物书。但是React的重要理念或是思想是简单的，主要是以下两点：</p>
<ul>
<li>由<strong>数据驱动</strong>的响应式编程思想，概况为<strong>UI = render(data)</strong></li>
<li>一切基于<strong>组件</strong></li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2018/05/02/2018-5-2-React-redux/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/04/14/2018-04-14 YDNJS-mid/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/04/14/2018-04-14 YDNJS-mid/" itemprop="url">你不知道的JS中卷 笔记</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-04-14T17:06:27+00:00">
                2018-04-14
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
                  ， 
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/笔记/" itemprop="url" rel="index">
                    <span itemprop="name">笔记</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p># 类型</p>
<p>## 内置类型</p>
<ul>
<li>null</li>
<li>undefined</li>
<li>boolean</li>
<li>number</li>
<li>string</li>
<li>object</li>
<li>symbol</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span> === <span class="string">"object"</span>: <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>历史遗留问题，用复合条件来检测null值的类型：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="literal">null</span>;</span><br><span class="line">(!a &amp;&amp; <span class="keyword">typeof</span> a === <span class="string">"object"</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>变量是没有类型的，只有值才有，对变量执行typeof操作时，得到的结果是该变量持有的值的类型</p>
<p>已在作用域中声明但还没有赋值的变量，是undefined的。相反，还没有在作用域中声明过的变量是undeclared的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> a; <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> b; <span class="comment">// undefined (其实应当返回undeclared, typeof的安全防范机制)</span></span><br></pre></td></tr></table></figure>
<h2 id="typeof-undeclared"><a href="#typeof-undeclared" class="headerlink" title="typeof undeclared"></a>typeof undeclared</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这样会抛出错误</span></span><br><span class="line"><span class="keyword">if</span>(DEBUG) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"Debugging is staring"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这样是安全的</span></span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> DEBUG !== <span class="string">"undefined"</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"Debugging is starting"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;!--more--&gt;</span><br></pre></td></tr></table></figure>
<p>在没有全局变量可用的时候，使用typeof的安全防范机制做检查；或是使用“依赖注入”(dependency injection)设计模式将参数显式地传递到函数中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomethingCool</span>(<span class="params">Feature</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> helper = Feature || <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="comment">/* .. default feature .. */</span> &#125;;</span><br><span class="line">  <span class="keyword">var</span> val = helper();</span><br><span class="line">  <span class="comment">// ..</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><ul>
<li>变量没有类型，但它们持有的值有类型。类型定义了值的行为特征。</li>
<li>undeclared表示变量还没有被声明过</li>
<li>访问undeclared变量时会报错”ReferenceError: a is not defined”,并且typeof因为安全防范机制，对于undeclared、undefined都返回undefined</li>
</ul>
<h1 id="值"><a href="#值" class="headerlink" title="值"></a>值</h1><h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><p>使用delete运算符可以将单元从数组中删除，但是单元删除后，数组的length属性不会发生变化。</p>
<p>创建“稀疏”数组时，要注意其中的空白单元”empty slot”</p>
<p>数组通过数字进行索引，又去的是他们也是对象，所以也可以包含字符串键值和属性，但是不计算在数组长度内。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [];</span><br><span class="line"></span><br><span class="line">a[<span class="number">0</span>] = <span class="number">1</span>;</span><br><span class="line">a[<span class="string">"foobar"</span>] = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line">a.length; <span class="comment">// 1</span></span><br><span class="line">a[<span class="string">"length"</span>]; <span class="comment">// 2</span></span><br><span class="line">a.foobar; <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
<p><strong>特别注意</strong>如果字符串键值能够被强制类型转换为十进制的数字，它会被当作数字索引来处理<br>所以建议使用对象来存放键值/属性值，用数组来存放数字索引值。</p>
<h1 id="类数组"><a href="#类数组" class="headerlink" title="类数组"></a>类数组</h1><p>有时候需要将类数组（一组通过数组索引的值）转换为真正的数组，这一般是通过数组工具函数实现</p>
<p>工具函数slice(..)经常被用于这一转换<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> arr = <span class="built_in">Array</span>.prototype.slice.call( <span class="built_in">arguments</span> ); <span class="comment">// slice返回的是一个数组的副本</span></span><br><span class="line">  arr.push( <span class="string">"bam"</span> );</span><br><span class="line">  <span class="built_in">console</span>.log( arr );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>用ES6中的内置工具函数Array.from(..)可以实现同样的功能</p>
<h2 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h2><p>字符串和数组很相似，都是类数组，都有length属性以及indexOf(..)和concat(..)方法<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">"foo"</span>;</span><br><span class="line"><span class="keyword">var</span> b = [<span class="string">"f"</span>, <span class="string">"o"</span>, <span class="string">"o"</span>];</span><br></pre></td></tr></table></figure></p>
<p>字符串不是字符数组，字符串是不可改变的，而数组是可以改变的。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">a[<span class="number">1</span>] = <span class="string">"0"</span>; <span class="comment">// 应当使用a.charAt(1) 获取</span></span><br><span class="line">b[<span class="number">1</span>] = <span class="string">"0"</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">a; <span class="comment">// "foo</span></span><br><span class="line">b; <span class="comment">// ["f", "o", "o"]</span></span><br></pre></td></tr></table></figure></p>
<p>字符串不可变是指字符串的成员函数不会改变其原始值，而是创建并返回一个新的字符串。而数组的成员函数都是在其原始值上进行操作。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">c = a.toUpperCase();</span><br><span class="line">a === c; <span class="comment">//false</span></span><br><span class="line">a; <span class="comment">// "foo"</span></span><br><span class="line">c; <span class="comment">// "FOO"</span></span><br><span class="line"></span><br><span class="line">b.push( <span class="string">"!"</span> );</span><br><span class="line">b; <span class="comment">// ["f", "o", "o", "!"]</span></span><br></pre></td></tr></table></figure>
<p>许多数组函数用来处理字符串很方便，虽然字符串没有这些函数，但可以通过“借用”数组的非变更方法来处理字符串<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">a.join; <span class="comment">// undefined</span></span><br><span class="line">a.map; <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> c = <span class="built_in">Array</span>.prototype.join.call(a, <span class="string">"-"</span>);</span><br><span class="line"><span class="keyword">var</span> d = <span class="built_in">Array</span>.prototype.map.call(a, <span class="function"><span class="keyword">function</span>(<span class="params">v</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> v.toUpperCase() + <span class="string">"."</span>;</span><br><span class="line">&#125;).join( <span class="string">""</span> );</span><br><span class="line"></span><br><span class="line">c; <span class="comment">// "f-o-o"</span></span><br><span class="line">d; <span class="comment">// "F.O.O."</span></span><br></pre></td></tr></table></figure></p>
<p>字符串反转<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reverse.call(a); <span class="comment">// 返回值仍然是"foo"的一个封装对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// other way</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> c = a.split(<span class="string">""</span>).reverse().join(<span class="string">""</span>);</span><br><span class="line">c; <span class="comment">// oof</span></span><br></pre></td></tr></table></figure></p>
<h2 id="数字"><a href="#数字" class="headerlink" title="数字"></a>数字</h2><p><code>.</code>运算符是一个有效的数字字符，回被优先识别为数字常量的一部分，然后才是对象属性访问运算符。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">42.</span>toFixed(<span class="number">3</span>); <span class="comment">// SyntaxError</span></span><br><span class="line"></span><br><span class="line">(<span class="number">42</span>).toFixed(<span class="number">3</span>); <span class="comment">// "42.000"</span></span><br><span class="line"><span class="number">0.42</span>.toFixed(<span class="number">3</span>); <span class="comment">// "0.420"</span></span><br><span class="line"><span class="number">42.</span>.toFixed(<span class="number">3</span>); <span class="comment">// "42.000"</span></span><br></pre></td></tr></table></figure></p>
<h3 id="0-1-0-2-0-3问题"><a href="#0-1-0-2-0-3问题" class="headerlink" title="0.1+0.2 != 0.3问题"></a>0.1+0.2 != 0.3问题</h3><p>最常见的方法是设置一个误差范围值，通常称为机器精度(machine epsilon)</p>
<p>对于JS的数字来说，这个值通常是2^-52</p>
<p>ES6中内置了这个数字Number.EPSILON，或者写成Math.pow(2, -52);<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//polyfill</span></span><br><span class="line"><span class="keyword">if</span> (!<span class="built_in">Number</span>.EPSILON) &#123;</span><br><span class="line">  <span class="built_in">Number</span>.EPSILON = <span class="built_in">Math</span>.pow(<span class="number">2</span>, <span class="number">-52</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>于是我们可以解决0.1+0.2 != 0.3这个问题了<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">numbersCloseEnoughToEqual</span>(<span class="params">n1, n2</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Math</span>.abs(n1 - n2) &lt; <span class="built_in">Number</span>.EPSILON;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">0.1</span> + <span class="number">0.2</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">0.3</span>;</span><br><span class="line">numbersCloseEnoughToEqual(a, b); <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p>
<h3 id="整数的安全范围"><a href="#整数的安全范围" class="headerlink" title="整数的安全范围"></a>整数的安全范围</h3><p>数字的呈现方式导致整数的安全范围远小于Number.MAX_VALUE （1.7976931348623157e+308）<br>能够被安全呈现的最大整数是2^53 - 1(去除1符号位，11位指数，还有52位) Number.MAX_SAFE_INTEGER (9007199254740991)</p>
<h3 id="整数检测"><a href="#整数检测" class="headerlink" title="整数检测"></a>整数检测</h3><p>ES6 中 Number.isInteger(..)<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>.isInteger(<span class="number">42</span>); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Number</span>.isInteger(<span class="number">42.000</span>); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Number</span>.isInteger(<span class="number">42.3</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure></p>
<p>polyfill方法<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (!<span class="built_in">Number</span>.isInteger) &#123;</span><br><span class="line">  <span class="built_in">Number</span>.isInteger = <span class="function"><span class="keyword">function</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">typeof</span> num == <span class="string">"number"</span> &amp;&amp; num % <span class="number">1</span> == <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="32位有符号整数"><a href="#32位有符号整数" class="headerlink" title="32位有符号整数"></a>32位有符号整数</h3><p>虽然整数最大能够达到53位，但是有些数字操作（如数位操作）只适用于32位数字，所以在这些操作中数字的安全范围就回从</p>
<p>Math.pow(-2,31)~Math.pow(2,31)</p>
<p>-2147483648 ~ 2147483648</p>
<p>如<code>a | 0</code>可以将变量a中的数值转换为32位有符号整数，因为数位操作符<code>|</code>只适用于32位整数。因此与0进行操作可以截取a中的32位数位。</p>
<blockquote>
<p>某些特殊的值并不是32位安全范围的，比如NaN和Infinity</p>
</blockquote>
<h2 id="特殊数值"><a href="#特殊数值" class="headerlink" title="特殊数值"></a>特殊数值</h2><h3 id="undefined"><a href="#undefined" class="headerlink" title="undefined"></a>undefined</h3><p>在非严格模式下，可以为全局标识符undefined赋值，undefined是一个内部标识符，它的值为undefined（可以被改变）</p>
<p>通过void运算符可以获得该值</p>
<p>void并不改变表达式的结果，只是让表达式不返回值。</p>
<p>一些应用<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!APP.ready) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">void</span> setTimeout( doSomething, <span class="number">100</span>); <span class="comment">// 不返回timeId而是返回undefined</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>一般会分开操作，效果都一样。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!APP.ready) &#123;</span><br><span class="line">    setTimeout( doSomething, <span class="number">100</span>); <span class="comment">// 不返回timeId而是返回undefined</span></span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>未完待续…</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/04/11/2018-04-11/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/04/11/2018-04-11/" itemprop="url">js中function本身的length属性和arguments.length区别？</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-04-11T19:17:57+00:00">
                2018-04-11
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>[转]JavaScript中，函数本身的length属性和arguments.length到底有什么区别？</p>
<blockquote>
<p>其实就是理想与现实的距离。</p>
</blockquote>
<h3 id="正经答案"><a href="#正经答案" class="headerlink" title="正经答案"></a>正经答案</h3><blockquote>
<p>函数对象的length属性是形式参数的个数；<br>arguments伪变量的length属性是某次调用的实际参数的个数。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function func(a,b,c)&#123;</span><br><span class="line">    console.log(arguments.length);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">console.log(func.length)//输出：3</span><br><span class="line"></span><br><span class="line">func(1);//输出: 1</span><br></pre></td></tr></table></figure>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/21/">21</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="何米酥">
            
              <p class="site-author-name" itemprop="name">何米酥</p>
              <p class="site-description motion-element" itemprop="description">Just do...</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">202</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">78</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/hemisu" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.zhihu.com/people/hemisu" target="_blank" title="知乎">
                      
                        <i class="fa fa-fw fa-globe"></i>知乎</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">何米酥</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
